<!-- 搜索栏 -->
<div nz-row [nzGutter]="24" style="white-space: nowrap">
    <div nz-col [nzSpan]="24">
        <div nz-row>
            <nz-col class="search-button-col">
                <app-search-button [search]="true" (searchEvent)="onSearch()" [reset]="false"
                    [create]="true" (createEvent)="onCreate(groupTypeTitle, groupTypeContent)"></app-search-button>
            </nz-col>
        </div>
    </div>
</div>

<!-- 组类型Table -->
<div nz-row style="margin-top: 4px; white-space: nowrap;">
    <nz-table #expandTable nzShowPagination [nzData]="groupTypes" nzTableLayout="fixed" [nzFrontPagination]="false"
        [nzPageIndex]="pageIndex" [nzPageSize]="pageSize" [nzTotal]="total" (nzQueryParams)="onPageParamChange($event)">
        <thead>
            <tr>
                <th>组类型ID</th>
                <th>组类型</th>
                <th>组类型名称</th>
                <th>组类型描述</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody>
            <tr *ngFor="let groupType of groupTypes">
                <td>{{groupType.id}}</td>
                <td>{{groupType.key}}</td>
                <td>{{groupType.name}}</td>
                <td nz-tooltip="{{groupType.desc}}">{{groupType.desc}}</td>
                <td [nzEllipsis]="true" style="overflow: hidden;" nzRight>
                    <button nz-button class="action-button normal-button" (click)="onDetail(detailTitle, detailContent, groupType)">详情</button>
                    <button nz-button class="action-button normal-button" (click)="onUpdate(groupType, groupTypeTitle, groupTypeContent)">编辑</button>
                    <button nz-button class="action-button delete-button" (click)="handleDelete(groupType.id!)">删除</button>
                </td>
            </tr>
        </tbody>
    </nz-table>
</div>

<!-- 新建,编辑对话框 -->
<nz-modal class="edit-modal">
    <ng-template #groupTypeTitle style="padding: 10px 20px;">
        {{editTitle}}
        @if (typeName != null) {
            <span style="color: rgb(55, 134, 90);">{{typeName}}</span>
        }
    </ng-template>

    <ng-template #groupTypeContent>
        <app-add-group-type (addGroupTypeEvent)="onAddGroupTypeEvent($event)" [modeSubject]="modeSubject"></app-add-group-type>
    </ng-template>
</nz-modal>

<!-- 详情对话框 -->
<nz-modal class="edit-modal">
    <ng-template #detailTitle>组类型详情:<span style="color: rgb(55, 134, 90);">{{typeName}}</span></ng-template>

    <ng-template #detailContent>
        <app-group-type-detail (detailEvent)="onDetailEvent($event)" [groupTypeSubject]="typeSubject"></app-group-type-detail>
    </ng-template>
</nz-modal>